<template>
  <div class="profile-container cyber-bg">
    <!-- 页面头部 -->
    <div class="profile-page-header">
      <h1 class="page-title">个人中心</h1>
    </div>
    
    <!-- 用户基本信息卡片 -->
    <div class="profile-header">
      <div class="avatar-container">
        <div class="avatar" :style="{ backgroundImage: `url(${userProfile.avatar})` }"></div>
        <div class="edit-avatar-btn" @click="uploadAvatar">
          <span>+</span>
        </div>
      </div>
      <div class="user-basic-info">
        <h2 class="username">{{ userProfile.username }}</h2>
        <p class="user-id">ID: {{ userProfile.id }}</p>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-value">{{ userStats.totalGames }}</span>
            <span class="stat-label">总场次</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ userStats.winRate }}%</span>
            <span class="stat-label">胜率</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ userStats.tier }}</span>
            <span class="stat-label">段位</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 导航标签 -->
    <div class="profile-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="['tab-button', { active: activeTab === tab.id }]"
        @click="activeTab = tab.id"
      >
        {{ tab.name }}
        <span v-if="tab.id === 'messages' && unreadMessages > 0" class="badge">{{ unreadMessages }}</span>
      </button>
    </div>
    
    <!-- 内容区域 -->
    <div class="profile-content">
      <!-- 基本信息 -->
      <div v-if="activeTab === 'basic'" class="tab-content">
        <div class="profile-section">
          <h3 class="section-title">账户信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <label>昵称</label>
              <div class="info-value">
                <span>{{ userProfile.nickname }}</span>
                <button class="edit-icon" @click="editField('nickname')"></button>
              </div>
            </div>
            <div class="info-item">
              <label>邮箱</label>
              <div class="info-value">
                <span>{{ userProfile.email }}</span>
                <button class="edit-icon" @click="editField('email')"></button>
              </div>
            </div>
            <div class="info-item">
              <label>手机号</label>
              <div class="info-value">
                <span v-if="userProfile.phone">{{ userProfile.phone }}</span>
                <span v-else class="not-set">未绑定</span>
                <button class="edit-icon" @click="editField('phone')"></button>
              </div>
            </div>
            <div class="info-item">
              <label>注册时间</label>
              <span>{{ formatDate(userProfile.registrationDate) }}</span>
            </div>
            <div class="info-item">
              <label>上次登录</label>
              <span>{{ formatDate(userProfile.lastLogin) }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 账号安全 -->
      <div v-if="activeTab === 'security'" class="tab-content">
        <div class="profile-section">
          <h3 class="section-title">安全设置</h3>
          <div class="security-options">
            <div class="security-item">
              <label>修改密码</label>
              <span class="last-updated">上次修改: 30天前</span>
              <button class="action-btn" @click="changePassword">修改</button>
            </div>
            <div class="security-item">
              <label>两步验证</label>
              <span v-if="userProfile.twoFactorEnabled" class="status enabled">已开启</span>
              <span v-else class="status disabled">未开启</span>
              <button class="action-btn" @click="toggleTwoFactor">
                {{ userProfile.twoFactorEnabled ? '关闭' : '开启' }}
              </button>
            </div>
            <div class="security-item">
              <label>登录设备管理</label>
              <span class="device-count">{{ activeDevices.length }} 台设备</span>
              <button class="action-btn" @click="manageDevices">管理</button>
            </div>
            <div class="security-item">
              <label>IP登录限制</label>
              <div class="toggle-switch">
                <input type="checkbox" v-model="userProfile.security.ipRestriction" />
                <span class="slider"></span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="profile-section">
          <h3 class="section-title">注销账号</h3>
          <p class="warning-text">注销账号后，所有数据将无法恢复，包括游戏记录、充值记录等。</p>
          <button class="danger-btn" @click="showDeleteConfirm">注销账号</button>
        </div>
      </div>
      
      <!-- 游戏战绩 -->
      <div v-if="activeTab === 'stats'" class="tab-content">
        <div class="profile-section">
          <h3 class="section-title">战绩统计</h3>
          <div class="stats-grid">
            <div class="stat-card">
              <h4>本赛季</h4>
              <div class="stat-number">{{ seasonStats.games }}</div>
              <div class="stat-label">场次</div>
            </div>
            <div class="stat-card">
              <h4>胜率</h4>
              <div class="stat-number">{{ seasonStats.winRate }}%</div>
              <div class="stat-label">当前赛季</div>
            </div>
            <div class="stat-card">
              <h4>前三名</h4>
              <div class="stat-number">{{ seasonStats.top3 }}</div>
              <div class="stat-label">次数</div>
            </div>
            <div class="stat-card">
              <h4>平均排名</h4>
              <div class="stat-number">{{ seasonStats.avgRank }}</div>
              <div class="stat-label">当前赛季</div>
            </div>
          </div>
        </div>
        
        <div class="profile-section">
          <h3 class="section-title">最近战绩</h3>
          <div class="match-history">
            <div v-for="match in recentMatches" :key="match.id" class="match-item">
              <div class="match-rank" :class="getRankClass(match.rank)">{{ match.rank }}</div>
              <div class="match-info">
                <div class="match-date">{{ formatDate(match.date) }}</div>
                <div class="match-comp">{{ match.composition }}</div>
              </div>
              <div class="match-stats">
                <span class="gold">{{ match.gold }}金</span>
                <span class="level">Lv.{{ match.level }}</span>
              </div>
            </div>
          </div>
          <button class="load-more-btn">加载更多</button>
        </div>
      </div>
      
      <!-- 收藏夹 -->
      <div v-if="activeTab === 'favorites'" class="tab-content">
        <div class="profile-section">
          <h3 class="section-title">我的收藏</h3>
          <div class="favorites-grid">
            <div v-for="favorite in favorites" :key="favorite.id" class="favorite-card">
              <div class="favorite-image" :style="{ backgroundImage: `url(${favorite.image})` }"></div>
              <div class="favorite-info">
                <h4>{{ favorite.title }}</h4>
                <p class="favorite-type">{{ favorite.type }}</p>
                <div class="favorite-actions">
                  <button class="view-btn" @click="viewFavorite(favorite.id)">查看</button>
                  <button class="remove-btn" @click="removeFavorite(favorite.id)">移除</button>
                </div>
              </div>
            </div>
          </div>
          <p v-if="favorites.length === 0" class="empty-message">暂无收藏内容</p>
        </div>
      </div>
      
      <!-- 消息通知 -->
      <div v-if="activeTab === 'messages'" class="tab-content">
        <div class="profile-section">
          <h3 class="section-title">消息通知</h3>
          <div class="messages-list">
            <div v-for="message in messages" :key="message.id" class="message-item" :class="{ unread: message.unread }">
              <div class="message-header">
                <h4>{{ message.title }}</h4>
                <span class="message-date">{{ formatRelativeTime(message.date) }}</span>
              </div>
              <div class="message-content">{{ message.content }}</div>
              <div class="message-actions">
                <button class="mark-read-btn" v-if="message.unread" @click="markAsRead(message.id)">标为已读</button>
                <button class="delete-btn" @click="deleteMessage(message.id)">删除</button>
              </div>
            </div>
          </div>
          <p v-if="messages.length === 0" class="empty-message">暂无消息</p>
        </div>
      </div>
      
      <!-- 偏好设置 -->
      <div v-if="activeTab === 'settings'" class="tab-content">
        <div class="profile-section">
          <h3 class="section-title">界面设置</h3>
          <div class="preference-options">
            <div class="preference-item">
              <label>主题</label>
              <select v-model="userProfile.theme" @change="updateSettings">
                <option value="dark">暗黑模式</option>
                <option value="light">明亮模式</option>
                <option value="auto">跟随系统</option>
              </select>
            </div>
            <div class="preference-item">
              <label>语言</label>
              <select v-model="userProfile.language" @change="updateSettings">
                <option value="zh-CN">简体中文</option>
                <option value="en-US">English</option>
              </select>
            </div>
            <div class="preference-item">
              <label>音效音量</label>
              <input type="range" v-model.number="userProfile.volume.sound" min="0" max="100" @change="updateSettings">
              <span class="volume-value">{{ userProfile.volume.sound }}%</span>
            </div>
            <div class="preference-item">
              <label>背景音乐</label>
              <input type="range" v-model.number="userProfile.volume.music" min="0" max="100" @change="updateSettings">
              <span class="volume-value">{{ userProfile.volume.music }}%</span>
            </div>
          </div>
        </div>
        
        <div class="profile-section">
          <h3 class="section-title">通知设置</h3>
          <div class="preference-options">
            <div class="preference-item">
              <label>接收通知</label>
              <div class="toggle-switch">
                <input type="checkbox" v-model="userProfile.notifications.enabled" @change="updateSettings" />
                <span class="slider"></span>
              </div>
            </div>
            <div class="preference-item">
              <label>游戏更新通知</label>
              <div class="toggle-switch">
                <input type="checkbox" v-model="userProfile.notifications.gameUpdates" @change="updateSettings" />
                <span class="slider"></span>
              </div>
            </div>
            <div class="preference-item">
              <label>好友请求通知</label>
              <div class="toggle-switch">
                <input type="checkbox" v-model="userProfile.notifications.friendRequests" @change="updateSettings" />
                <span class="slider"></span>
              </div>
            </div>
            <div class="preference-item">
              <label>活动通知</label>
              <div class="toggle-switch">
                <input type="checkbox" v-model="userProfile.notifications.events" @change="updateSettings" />
                <span class="slider"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 模态框 -->
    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>{{ modalTitle }}</h3>
          <button class="close-btn" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <!-- 根据模态框类型显示不同内容 -->
          <div v-if="modalType === 'edit'">
            <div class="form-group">
              <label>{{ modalData.label }}</label>
              <input 
                type="text" 
                v-model="modalData.value" 
                :placeholder="modalData.placeholder"
              />
            </div>
          </div>
          <div v-if="modalType === 'changePassword'">
            <div class="form-group">
              <label>当前密码</label>
              <input type="password" v-model="passwordData.current" placeholder="请输入当前密码" />
            </div>
            <div class="form-group">
              <label>新密码</label>
              <input type="password" v-model="passwordData.new" placeholder="请输入新密码" />
            </div>
            <div class="form-group">
              <label>确认新密码</label>
              <input type="password" v-model="passwordData.confirm" placeholder="请再次输入新密码" />
            </div>
          </div>
          <div v-if="modalType === 'deleteAccount'">
            <p class="danger-text">您确定要注销账号吗？此操作不可撤销！</p>
            <div class="form-group">
              <label>请输入您的密码确认</label>
              <input type="password" v-model="deleteConfirmPassword" placeholder="请输入密码" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="closeModal">取消</button>
          <button class="confirm-btn" @click="confirmModal">{{ modalConfirmText }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProfileView',
  data() {
    return {
      // 活跃标签
      activeTab: 'basic',
      
      // 标签页配置
      tabs: [
        { id: 'basic', name: '基本信息' },
        { id: 'stats', name: '游戏战绩' },
        { id: 'favorites', name: '我的收藏' },
        { id: 'messages', name: '消息通知' },
        { id: 'security', name: '账号安全' },
        { id: 'settings', name: '偏好设置' }
      ],
      
      // 用户资料
      userProfile: {
        id: '10086',
        username: 'player123',
        nickname: '电竞小王子',
        email: 'player@example.com',
        phone: '',
        avatar: '/img/1.jpg',
        registrationDate: '2024-01-15T08:30:00Z',
        lastLogin: new Date().toISOString(),
        twoFactorEnabled: false,
        security: {
          ipRestriction: false
        },
        notifications: {
          enabled: true,
          gameUpdates: true,
          friendRequests: true,
          events: true
        },
        theme: 'dark',
        language: 'zh-CN',
        volume: {
          sound: 80,
          music: 50
        }
      },
      
      // 用户统计数据
      userStats: {
        totalGames: 128,
        winRate: 45,
        tier: '钻石IV'
      },
      
      // 本赛季数据
      seasonStats: {
        games: 32,
        winRate: 48,
        top3: 12,
        avgRank: 4.2
      },
      
      // 最近比赛记录
      recentMatches: [
        {
          id: 1,
          date: '2024-01-20T20:30:00Z',
          rank: 1,
          composition: '星界龙',
          gold: 68,
          level: 9
        },
        {
          id: 2,
          date: '2024-01-20T19:15:00Z',
          rank: 3,
          composition: '怒翼龙',
          gold: 45,
          level: 8
        },
        {
          id: 3,
          date: '2024-01-20T18:45:00Z',
          rank: 5,
          composition: '冒险家',
          gold: 32,
          level: 7
        },
        {
          id: 4,
          date: '2024-01-20T17:20:00Z',
          rank: 2,
          composition: '碧波龙',
          gold: 58,
          level: 8
        }
      ],
      
      // 收藏内容
      favorites: [
        {
          id: 1,
          title: '星界龙95运营技巧',
          type: '攻略',
          image: '/img/1.jpg'
        },
        {
          id: 2,
          title: 'S11全英雄出装指南',
          type: '攻略',
          image: '/img/2.jpg'
        },
        {
          id: 3,
          title: '版本最强阵容',
          type: '视频',
          image: '/img/3.jpg'
        }
      ],
      
      // 消息通知
      messages: [
        {
          id: 1,
          title: '新版本更新',
          content: 'S12版本已更新，新增了5个英雄和3个羁绊！',
          date: '2024-01-20T08:00:00Z',
          unread: true
        },
        {
          id: 2,
          title: '活动提醒',
          content: '周末双倍经验活动即将开始，不要错过！',
          date: '2024-01-19T14:30:00Z',
          unread: true
        },
        {
          id: 3,
          title: '好友上线',
          content: '你的好友「大神玩家」正在游戏中，快来一起组队吧！',
          date: '2024-01-18T21:15:00Z',
          unread: false
        }
      ],
      
      // 活跃设备
      activeDevices: [
        {
          id: 1,
          device: 'Windows PC',
          location: '上海',
          lastActive: '2024-01-20T20:30:00Z',
          ip: '192.168.1.1'
        },
        {
          id: 2,
          device: 'Android手机',
          location: '北京',
          lastActive: '2024-01-19T15:20:00Z',
          ip: '192.168.1.2'
        }
      ],
      
      // 模态框相关
      showModal: false,
      modalType: '',
      modalTitle: '',
      modalData: {
        label: '',
        value: '',
        placeholder: ''
      },
      modalConfirmText: '',
      
      // 密码修改数据
      passwordData: {
        current: '',
        new: '',
        confirm: ''
      },
      
      // 注销确认密码
      deleteConfirmPassword: ''
    }
  },
  
  computed: {
    // 未读消息数量
    unreadMessages() {
      return this.messages.filter(msg => msg.unread).length;
    }
  },
  
  methods: {
    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    
    // 格式化相对时间
    formatRelativeTime(dateString) {
      const now = new Date();
      const date = new Date(dateString);
      const diffMinutes = Math.floor((now - date) / (1000 * 60));
      
      if (diffMinutes < 1) return '刚刚';
      if (diffMinutes < 60) return `${diffMinutes}分钟前`;
      if (diffMinutes < 1440) return `${Math.floor(diffMinutes / 60)}小时前`;
      return `${Math.floor(diffMinutes / 1440)}天前`;
    },
    
    // 获取排名样式类
    getRankClass(rank) {
      if (rank === 1) return 'rank-1';
      if (rank <= 3) return 'rank-top3';
      if (rank <= 5) return 'rank-middle';
      return 'rank-bottom';
    },
    
    // 上传头像
    uploadAvatar() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.onchange = (e) => {
        const file = e.target.files[0];
        if (file) {
          // 这里应该上传文件到服务器
          // 模拟预览
          const reader = new FileReader();
          reader.onload = (event) => {
            this.userProfile.avatar = event.target.result;
          };
          reader.readAsDataURL(file);
        }
      };
      input.click();
    },
    
    // 编辑字段
    editField(field) {
      let label = '';
      let placeholder = '';
      
      switch (field) {
        case 'nickname':
          label = '昵称';
          placeholder = '请输入昵称';
          break;
        case 'email':
          label = '邮箱';
          placeholder = '请输入邮箱';
          break;
        case 'phone':
          label = '手机号';
          placeholder = '请输入手机号';
          break;
      }
      
      this.modalType = 'edit';
      this.modalTitle = `编辑${label}`;
      this.modalData = {
        field,
        label,
        value: this.userProfile[field] || '',
        placeholder
      };
      this.modalConfirmText = '保存';
      this.showModal = true;
    },
    
    // 修改密码
    changePassword() {
      this.modalType = 'changePassword';
      this.modalTitle = '修改密码';
      this.passwordData = {
        current: '',
        new: '',
        confirm: ''
      };
      this.modalConfirmText = '确认修改';
      this.showModal = true;
    },
    
    // 切换两步验证
    toggleTwoFactor() {
      this.userProfile.twoFactorEnabled = !this.userProfile.twoFactorEnabled;
      this.updateSettings();
    },
    
    // 管理设备
    manageDevices() {
      alert('设备管理功能开发中...');
    },
    
    // 显示注销确认
    showDeleteConfirm() {
      this.modalType = 'deleteAccount';
      this.modalTitle = '注销账号';
      this.deleteConfirmPassword = '';
      this.modalConfirmText = '确认注销';
      this.showModal = true;
    },
    
    // 查看收藏
    viewFavorite(id) {
      alert(`查看收藏内容：${id}`);
    },
    
    // 移除收藏
    removeFavorite(id) {
      if (confirm('确定要移除这个收藏吗？')) {
        this.favorites = this.favorites.filter(fav => fav.id !== id);
      }
    },
    
    // 标记为已读
    markAsRead(id) {
      const message = this.messages.find(msg => msg.id === id);
      if (message) {
        message.unread = false;
      }
    },
    
    // 删除消息
    deleteMessage(id) {
      if (confirm('确定要删除这条消息吗？')) {
        this.messages = this.messages.filter(msg => msg.id !== id);
      }
    },
    
    // 更新设置
    updateSettings() {
      // 保存到localStorage
      localStorage.setItem('userSettings', JSON.stringify(this.userProfile));
      console.log('设置已更新');
    },
    
    // 关闭模态框
    closeModal() {
      this.showModal = false;
    },
    
    // 确认模态框
    confirmModal() {
      switch (this.modalType) {
        case 'edit':
          this.userProfile[this.modalData.field] = this.modalData.value;
          this.updateSettings();
          break;
        case 'changePassword':
          if (this.passwordData.new !== this.passwordData.confirm) {
            alert('两次输入的密码不一致');
            return;
          }
          alert('密码修改成功');
          break;
        case 'deleteAccount':
          // 这里应该验证密码
          alert('账号注销申请已提交，将在3天后处理');
          break;
      }
      this.closeModal();
    }
  },
  
  mounted() {
    // 从localStorage获取用户数据
    const userData = localStorage.getItem('user');
    if (userData) {
      try {
        const user = JSON.parse(userData);
        this.userProfile = {
          ...this.userProfile,
          ...user
        };
      } catch (e) {
        console.error('Failed to parse user data:', e);
      }
    }
    
    // 从localStorage获取设置
    const settingsData = localStorage.getItem('userSettings');
    if (settingsData) {
      try {
        const settings = JSON.parse(settingsData);
        this.userProfile = {
          ...this.userProfile,
          ...settings
        };
      } catch (e) {
        console.error('Failed to parse settings data:', e);
      }
    }
  }
}
</script>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器样式 */
.profile-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  color: #fff;
  padding: 20px;
}

.profile-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面标题 */
.page-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #00ffcc, #0099ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 用户卡片样式 */
.user-card {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.8));
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 255, 204, 0.2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.avatar-section {
  position: relative;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #00ffcc;
  background-color: #222;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 255, 204, 0.4);
}

.avatar-edit {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: #00ffcc;
  color: #0a0a0a;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 255, 204, 0.6);
}

.avatar-edit:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 255, 204, 0.8);
}

.user-details {
  flex: 1;
  min-width: 300px;
}

.user-name {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(45deg, #00ffcc, #0099ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.user-id {
  color: #888;
  font-size: 16px;
  margin-bottom: 15px;
}

.user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  font-size: 15px;
  color: #ccc;
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-icon {
  font-size: 18px;
  color: #00ffcc;
}

/* 标签页样式 */
.tabs-container {
  margin-bottom: 30px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  min-width: 120px;
  padding: 12px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #999;
  border: 1px solid transparent;
}

.tab:hover {
  background-color: rgba(0, 255, 204, 0.1);
  color: #00ffcc;
}

.tab.active {
  background: linear-gradient(135deg, #00ffcc, #0099ff);
  color: #0a0a0a;
  border-color: #00ffcc;
}

.tab-badge {
  display: inline-block;
  background-color: #ff5252;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 6px;
}

/* 内容区域样式 */
.tab-content {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 30px;
  min-height: 500px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 统计卡片样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.8), rgba(30, 30, 30, 0.8));
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  border: 1px solid rgba(0, 255, 204, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 255, 204, 0.2);
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #00ffcc;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #999;
}

.season-stats {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
  border: 1px solid rgba(0, 255, 204, 0.1);
}

.season-stats h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #00ffcc;
}

.season-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.season-stat-item {
  text-align: center;
}

.season-stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #00ffcc;
  margin-bottom: 5px;
}

.season-stat-label {
  font-size: 14px;
  color: #999;
}

/* 比赛记录样式 */
.recent-matches {
  margin-bottom: 20px;
}

.recent-matches h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #00ffcc;
}

.match-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border: 1px solid rgba(0, 255, 204, 0.1);
}

.match-item:hover {
  background-color: rgba(0, 255, 204, 0.1);
  border-color: rgba(0, 255, 204, 0.3);
}

.match-rank {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  flex-shrink: 0;
}

.rank-1 {
  background: linear-gradient(135deg, #ffd700, #ffed4a);
  color: #333;
}

.rank-top3 {
  background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
  color: #333;
}

.rank-middle {
  background: linear-gradient(135deg, #cd7f32, #ffb347);
  color: #fff;
}

.rank-bottom {
  background: linear-gradient(135deg, #808080, #a9a9a9);
  color: #fff;
}

.match-info {
  flex: 1;
}

.match-composition {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #00ffcc;
}

.match-details {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #999;
}

.match-date {
  font-size: 14px;
  color: #999;
}

/* 收藏内容样式 */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.favorite-card {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 255, 204, 0.1);
}

.favorite-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 255, 204, 0.2);
}

.favorite-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.favorite-content {
  padding: 15px;
}

.favorite-type {
  display: inline-block;
  background: linear-gradient(135deg, #00ffcc, #0099ff);
  color: #0a0a0a;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
}

.favorite-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #fff;
}

.favorite-actions {
  display: flex;
  gap: 10px;
}

/* 消息通知样式 */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 255, 204, 0.1);
  position: relative;
}

.message-item.unread {
  background-color: rgba(0, 255, 204, 0.1);
  border-color: #00ffcc;
}

.message-item.unread:before {
  content: '';
  position: absolute;
  top: 20px;
  left: -10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00ffcc;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message-title {
  font-size: 16px;
  font-weight: 500;
  color: #00ffcc;
  margin-bottom: 5px;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.message-content {
  font-size: 14px;
  color: #ccc;
  line-height: 1.5;
}

/* 账号安全样式 */
.security-section {
  margin-bottom: 30px;
}

.security-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #00ffcc;
}

.security-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 255, 204, 0.1);
}

.security-item:hover {
  background-color: rgba(0, 255, 204, 0.05);
  border-color: rgba(0, 255, 204, 0.2);
}

.security-info h4 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #fff;
}

.security-info p {
  font-size: 14px;
  color: #999;
}

/* 活跃设备样式 */
.devices-section {
  margin-bottom: 30px;
}

.devices-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #00ffcc;
}

.device-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 255, 204, 0.1);
}

.device-item:hover {
  background-color: rgba(0, 255, 204, 0.05);
}

.device-info {
  flex: 1;
}

.device-name {
  font-weight: 500;
  margin-bottom: 5px;
  color: #fff;
}

.device-details {
  color: #999;
  font-size: 12px;
}

.current-device {
  color: #00ffcc;
  font-weight: 500;
  font-size: 12px;
}

/* 设置区域样式 */
.settings-section {
  margin-bottom: 30px;
}

.settings-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #00ffcc;
}

.setting-item {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 255, 204, 0.1);
}

.setting-item:hover {
  background-color: rgba(0, 255, 204, 0.05);
}

.setting-info h4 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #fff;
}

.setting-info p {
  font-size: 14px;
  color: #999;
}

/* 表单元素样式 */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #fff;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #444;
  border-radius: 6px;
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #00ffcc;
  background-color: rgba(0, 255, 204, 0.1);
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
}

/* 按钮样式 */
.button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #00ffcc, #0099ff);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 255, 204, 0.4);
}

.button:active {
  transform: translateY(0);
}

.button-secondary {
  background: linear-gradient(135deg, #666, #888);
  color: #fff;
}

.button-secondary:hover {
  box-shadow: 0 4px 15px rgba(102, 102, 102, 0.4);
}

.button-danger {
  background: linear-gradient(135deg, #ff5252, #ff1744);
  color: #fff;
}

.button-danger:hover {
  box-shadow: 0 4px 15px rgba(255, 82, 82, 0.4);
}

.button-outline {
  background: transparent;
  border: 1px solid #00ffcc;
  color: #00ffcc;
}

.button-outline:hover {
  background-color: rgba(0, 255, 204, 0.1);
}

.edit-button {
  background: none;
  border: none;
  color: #00ffcc;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.edit-button:hover {
  background-color: rgba(0, 255, 204, 0.1);
}

/* 切换开关样式 */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  transition: 0.4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #00ffcc;
}

input:focus + .toggle-slider {
  box-shadow: 0 0 1px #00ffcc;
}

input:checked + .toggle-slider:before {
  transform: translateX(30px);
}

/* 状态标签样式 */
.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
}

.status-not-set {
  background-color: #ff5252;
  color: #fff;
}

.status-enabled {
  background-color: #00ffcc;
  color: #0a0a0a;
}

.status-disabled {
  background-color: #666;
  color: #fff;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background-color: #1a1a1a;
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 255, 204, 0.2);
  border: 1px solid rgba(0, 255, 204, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 20px;
  font-weight: bold;
  color: #00ffcc;
}

.modal-close {
  background: none;
  border: none;
  color: #999;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: #00ffcc;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

/* 音量滑块样式 */
.volume-control {
  width: 100%;
  max-width: 200px;
}

.volume-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #333;
  outline: none;
  -webkit-appearance: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00ffcc;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  background: #0099ff;
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00ffcc;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease;
}

.volume-slider::-moz-range-thumb:hover {
  background: #0099ff;
}

/* 模态框按钮样式 */
.cancel-btn {
  padding: 10px 20px;
  background-color: #555;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background-color: #666;
}

.confirm-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #00ffcc, #0099ff);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 255, 204, 0.4);
}

/* 危险文本样式 */
.danger-text {
  color: #ff5252;
  margin-bottom: 20px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    padding: 15px;
  }
  
  .user-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  
  .avatar {
    width: 120px;
    height: 120px;
  }
  
  .user-details {
    min-width: auto;
  }
  
  .user-name {
    font-size: 24px;
  }
  
  .user-meta {
    justify-content: center;
    gap: 15px;
  }
  
  .tabs {
    flex-direction: column;
  }
  
  .tab {
    min-width: auto;
  }
  
  .tab-content {
    padding: 20px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .favorites-grid {
    grid-template-columns: 1fr;
  }
  
  .match-item {
    flex-direction: column;
    text-align: center;
  }
  
  .match-details {
    justify-content: center;
  }
  
  .security-item,
  .setting-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .modal {
    padding: 20px;
  }
  
  .modal-footer {
    flex-direction: column;
  }
  
  .button,
  .cancel-btn,
  .confirm-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 24px;
  }
  
  .avatar {
    width: 100px;
    height: 100px;
  }
  
  .user-name {
    font-size: 20px;
  }
}
</style>